<script setup lang='ts'>
import { computed, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getAddcategory, getCategory, getChangecategory, getDelcategory } from '@/api/interface/http1';
import { ElMessageBox } from 'element-plus';

const text = ref('');
const text1 = ref('');
const text2 = ref('');
const text3= ref('');
const dialogFormVisible = ref(false);
const dialogVisible = ref(false);
// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(0);
const paginatedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return tableData.value.slice(start, end);
});

const handleCurrentChange = (newPage: number) => {
    currentPage.value = newPage;
};

const handleSizeChange = (newSize: number) => {
    pageSize.value = newSize;
};
//删除

const open = (row: any) => {
    ElMessageBox.confirm(
        '此操作将永久删除该文件，是否继续?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            let params = row.id;
            getDelcategory(params).then(res => {
                console.log(res);
                getCategoryList();
            });
            ElMessage({
                type: 'success',
                message: '已成功删除'
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除'
            });
        });
};
// 请求
const tableData = ref([]);
let params = reactive({
    pageSize: 100,
    pageNum: 1
});

function getCategoryList() {
    getCategory(params).then(res => {
        console.log(res);
        tableData.value = res.rows;
        totalItems.value = res.total;
    });
}

getCategoryList();
let data = reactive({
    id: '',
    enable: '',
    sort: '',
    name: ''
});

// 添加

const Addcategory = () => {
    console.log(data);
    data.sort = text1.value;
    data.name = text.value;
    getAddcategory(data).then(res => {
        if (res.code === 200) {
            console.log(res);
            tableData.value.push(data);
            getCategoryList();
            ElMessage({
                type: 'success',
                message: '添加成功！'
            });
        }
    });
    dialogFormVisible.value = false;
    text.value = '';
    text1.value = '';
};
// 编辑
const change = (index:number,row: any) => {
    dialogVisible.value = true;
    data.id = tableData.value[index].id,
    data.enable = tableData.value[index].enable,
    text2.value = row.name;
    text3.value = row.sort;
    console.log(data.id);
};
const Savechange = () => {
    console.log(tableData.value[0]);
    data.sort = text3.value,
    data.name = text2.value;
    dialogVisible.value = false;
    getChangecategory(data).then(res => {
        if (res.code === 200) {
            console.log(res);
            getCategoryList();
            ElMessage({
                type: 'success',
                message: '编辑成功！'
            });
        }
    });

};
</script>

<template>
    <div class='box'>
        <div class='add'>
            <el-button type='primary' @click='dialogFormVisible = true'>
                <span>添加</span>
            </el-button>
            <el-dialog v-model='dialogFormVisible' title='添加' width='616'>
                <div style='margin-bottom: 10px'>
                    <label for='' style='margin-left: 50px'>栏目名称：</label>
                    <el-input
                        v-model='text'
                        style='width: 273px;margin-left: 10px;'
                        maxlength='20'
                        placeholder='请输入名称'
                        show-word-limit
                        type='text'
                    />
                </div>
                <div style='margin-bottom: 30px'>
                    <label for='' style='margin-left: 50px'>排序：</label>
                    <el-input
                        v-model='text1'
                        style='width: 273px;margin-left: 38px;'
                        maxlength='3'
                        placeholder='请输入0-100数字'
                        show-word-limit
                        type='text'
                    />
                </div>
                <template #footer>
                    <div class='dialog-footer'>
                        <el-button @click='dialogFormVisible = false'>取消</el-button>
                        <el-button type='primary' @click='Addcategory'>
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <div class='section'>
            <el-table :data='paginatedData' border style='width: 100%;'>
                <!--                <el-table-column prop="serialNumber" label="排序" width="180" />-->
                <el-table-column prop='sort' width='180' label='排序' />
                <el-table-column prop='name' label='名称' width='447' />
                <el-table-column prop='updateTime' label='更新时间'  />
                <el-table-column label='操作' >
                    <template #default='scope'>
                        <el-button plain @click='change(scope.$index,scope.row)' style='background-color: transparent;border: none;color: #409EFF;width: 25px'>
                            <span style='font-size: 12px'>编辑</span>
                        </el-button>
                        <el-button plain @click='open(scope.row)' style='background-color: transparent;border: none;color: #409EFF;width: 25px'><span
                            style='font-size: 12px'>删除</span>
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-dialog v-model='dialogVisible' title='编辑' width='616'>
                <div style='margin-bottom: 10px'>
                    <label for='' style='margin-left: 50px'>栏目名称：</label>
                    <el-input
                        v-model='text2'
                        style='width: 273px;margin-left: 10px;'
                        maxlength='20'
                        placeholder='请输入名称'
                        show-word-limit
                        type='text'
                    />
                </div>
                <div style='margin-bottom: 30px'>
                    <label for='' style='margin-left: 50px'>排序：</label>
                    <el-input
                        v-model='text3'
                        style='width: 273px;margin-left: 38px;'
                        maxlength='3'
                        placeholder='请输入0-100数字'
                        show-word-limit
                        type='text'
                    />
                </div>
                <template #footer>
                    <div class='dialog-footer'>
                        <el-button @click='dialogVisible = false'>取消</el-button>
                        <el-button type='primary' @click='Savechange'>
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <div class='footer'>
            <el-pagination small background @sizeChange='handleSizeChange' @currentChange='handleCurrentChange'
                           :current-page='currentPage' :page-sizes='[10, 20, 30, 40]' :page-size='pageSize'
                           :total='totalItems'>
            </el-pagination>
        </div>
    </div>
</template>

<style scoped lang='less'>
.box {
    position: relative;
    margin-top: 20px;
    //width: 1168px;
    height: 720px;

    .add {
        margin-left: 40px;
        margin-top: 40px;

        button {
            width: 70px;
            height: 36px;
        }

        :deep(.el-dialog__header) {
            text-align: left;
            width: 616px;
            background-color: rgb(24, 146, 255);

            .el-dialog__title {
                color: white;
            }

            svg {
                color: white;
            }
        }
    }

    .section {
        padding: 0px 20px;
        margin-top: 40px;
        margin-bottom: 100px;

        :deep(.el-table__row) {
            height: 52px;

            td {
                text-align: center;
            }
        }

        :deep(.cell) {
            height: 27px;
            line-height: 27px;
            text-align: center;
        }

        :deep(.el-table_1_column_7 ) {
            color: #00AEF3;
        }

        :deep(.el-dialog__header) {
            text-align: left;
            width: 616px;
            background-color: rgb(24, 146, 255);

            .el-dialog__title {
                color: white;
            }

            svg {
                color: white;
            }
        }

        .contentTree {
            margin: auto;
            margin-top: 30px;
            width: 700px;
            background-color: #eeeeee;
            text-align: left;
        }
    }

    .footer {
        position: absolute;
        bottom: 20px;
        right: 30px;
    }
}
</style>
